<script setup lang="ts">
import { ref, onMounted, onActivated, watch, nextTick, computed, defineProps } from 'vue'
import { getVideoListData, getVideoUrlData } from '../api/video'
import type { VideoListType, VideoDateType } from '../types'
import { Toast } from 'vant';
const videoList = ref<VideoListType[]>([])
// const loading = ref(false);

const props = defineProps({
    videoId: Number,
})
onMounted(async () => {
    if (props.videoId) {
        let { data } = await getVideoListData(props.videoId)
        // let { data } = await getVideoListData()
        console.log(data.datas)
        videoList.value = data.datas
        getVideoDetails(data.datas)
        console.log(props.videoId);
    }
})
onActivated(async () => {
    // let { data } = await getVideoListData()
    // getVideoDetails(data.datas)
    console.log(props.videoId);

})
// 获取视频详情
const getVideoDetails = (videoListArr: VideoListType[]) => {

    let newVideoList = videoListArr.forEach((item: VideoListType) => {
        // 获取视频播放地址
        getVideoUrlData(item.data.vid).then(res => {
            item.data.url = res.data.urls[0].url
        })
    })

    videoList.value = videoListArr
    // console.log(newVideoList);


}
// 数值过万处理
const filter = (num: number) => {
    return num > 9999 ? (num / 10000).toFixed(1) + '万' : num
}
watch(
    () => props.videoId,
    (newValue, oldValue) => {
        console.log(newValue, "xin");
        console.log(oldValue, "jiu");

    }
)
</script>

<template>
    <div v-if="videoList.length">
        <div class="video-details" v-for="(item, index) in videoList" :key="index">
            <div class="video-content">
                <van-image lazy-load :src="item.data.coverUrl" />
                <p class="title van-ellipsis">{{ item.data.title }}</p>
            </div>

            <div class="video-author">
                <div class="left">
                    <img :src="item.data.creator.avatarUrl">
                    <p class="pub">{{ item.data.creator.nickname }}</p>

                </div>
                <div class="right">
                    <van-icon name="like-o" :badge="filter(item.data.praisedCount)" show-zero-badge="false" />
                    <van-icon name="chat-o" :badge="filter(item.data.commentCount)" show-zero-badge="false" />
                    <van-icon name="ellipsis" />
                </div>
            </div>

        </div>
    </div>

    <div v-if="!videoList.length">
        <van-loading type="circular" color="#000" />
    </div>

</template>

<style lang="scss">
.video-details {
    padding: 10px 10px 0;

    .video-content {
        width: 100%;
        // height: 150px;
        overflow: hidden;

        .van-image {
            width: 100%;
            height: 200px;
        }


        .title {
            margin: 10px 0 20px;

        }
    }

    .video-author {
        display: flex;

        .left {
            flex: 1;
            display: flex;
            align-items: center;

            img {
                width: 30px;
                height: 30px;
                border-radius: 999px;

            }

            .pub {
                margin-left: 10px;
            }

        }

        .right {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .van-icon {
                margin-left: 30px;
                font-size: 20px;

                &:nth-of-type(3) {
                    transform: rotate(90deg)
                }

                .van-badge {
                    color: #646566;
                    background-color: transparent;
                }

                .van-badge--top-right {
                    top: -5px;
                    right: -5px;
                    width: 50px;

                }
            }
        }
    }
}
</style>